<template>
    <view>
        <view class="cashier_box" v-if="type == 1">
            <image class="cas_bg" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/kaidan_bg.png" mode="" />
            <view class="cashier_type">
                <view class="traveler_view">
                    <image class="traveler_bg" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/bg_icon_1.png" mode="" />
                    <text>散客收银</text>
                </view>
                <view class="vip_view" @tap="goToCard">
                    <image class="vip_bg" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/bg_icon_2.png" mode="" />
                    <text class="t_1">会员收银</text>
                    <text class="t_2">点击选择会员></text>
                </view>
                <view class="traveler_view" @tap="goToQuick">
                    <image class="vip_bg" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/bg_icon_3.png" mode="" />
                    <text>快捷收款></text>
                </view>
            </view>
        </view>
        <view class="cashier_box_2" v-if="type == 2">
            <view class="cardsale-conter">
                <view class="shop-message">
                    <view class="shop-lt">
                        <view class="lt-profile">
                            <image :src="memberList.headPicture || 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/profile-hai.png'" mode="" />
                        </view>
                        <view class="lt-name">
                            {{ memberList.userName }}
                            <text class="lt-shopvip" v-if="memberList.storeVip">门店VIP</text>
                            <view class="lt-phone">{{ memberList.mobile }}</view>
                        </view>
                    </view>
                    <view class="hr"></view>
                    <view class="shop-rl">
                        <view class="rl-vipbox">
                            <view class="rl-vip">VIP会员</view>
                            <view class="rl-remaining">余额：¥{{ memberList.balance }}</view>
                        </view>
                        <image @tap="ElasticFrameClick" class="replace" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/replace.png"></image>
                    </view>
                </view>
                <view></view>
            </view>
        </view>
        <view class="type_btn">
            <view :class="(btnIndex === 0 ? 'hr_' : '') + ' project'" @tap="getBtnIndex" :data-index="0">
                <text>项目</text>
                <view v-if="btnIndex === 0"></view>
            </view>
        </view>
        <view>
            <view class="exhibitionbox">
                <!-- 分类 -->
                <view class="classify">
                    <view class="search-box">
                        <view class="search">
                            <van-icon name="search" size="18" class="seaicon" color="#666666" />
                            <text>请输入项目名称/编号进行查询</text>
                        </view>
                    </view>
                    <view class="page">
                        <view class="flex-row">
                            <!-- 左侧栏 -->
                            <view :class="'nav_left ' + (type == 3 ? '_nav_left' : '')">
                                <block v-for="(item, index) in servelist" :key="item.unique">
                                    <view
                                        :class="'nav_left_items ' + (curNav == item.id ? 'active' : '')"
                                        @tap="onLeftTab"
                                        :data-servicename="item.servicename"
                                        :data-index="index"
                                        :data-id="item.id"
                                    >
                                        {{ item.name }}
                                    </view>
                                </block>
                            </view>
                            <!-- 右侧栏 -->
                            <view :class="'nav_right ' + (type == 3 ? '_nav_left' : '')">
                                <scroll-view :scroll-y="true" class="nav_right_list" @scrolltolower="scrollLower">
                                    <block>
                                        <view class="nav_right_items" :data-id="item.paperPatternsId">
                                            <view class="nav_right_itemsname">
                                                {{ rightconterts }}
                                            </view>
                                            <view class="nav_right_info" v-for="(item, index) in rightserve" :key="item.unique">
                                                <image class="righticon" :src="item.img || 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/girl.png'"></image>

                                                <view class="conten-right" :data-serviceOptionId="item.serviceOptionId" :data-index="index" @tap="select" :data-item="item">
                                                    <view class="conten-box">
                                                        <view class="rightconterts-title">{{ item.serviceName || item.serviceOptionDetails[0].optionvalue }}</view>
                                                        <view class="original-price">原价:￥{{ item.price }}</view>
                                                        <view class="vip-price">会员价:￥{{ item.memberPrice }}</view>
                                                    </view>
                                                    <view :data-item="item">
                                                        <image class="project-pitch" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/no-pitch.png"></image>
                                                        <image
                                                            v-if="item.isactivity == true"
                                                            class="project-pitch"
                                                            src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/project-pitch.png"
                                                        ></image>
                                                    </view>
                                                </view>
                                            </view>
                                        </view>
                                    </block>
                                </scroll-view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="base-box" v-if="selectedServerList.length > 0">
            <view class="serve-iconbox" @tap="showGoodsInfo">
                <image class="serve-icon" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/serve-icon.png"></image>
                <view>
                    合计
                    <text class="ServerListsum">{{ selectedServerList.length }}</text>
                    项目
                </view>
            </view>
            <view class="choose-good" @tap="nextStep">{{ type == 3 ? '确认' : '下一步' }}</view>
        </view>
        <view v-if="showGoods" @tap="hideGoodsInfo" class="showGoods" @touchmove.stop.prevent="trueFun"></view>
        <view v-if="showGoods" class="shoppingCart" @touchmove.stop.prevent="trueFun">
            <view class="cart_t">
                <view class="cart_t_l">
                    <view></view>
                    <text>充值信息</text>
                </view>
                <view class="cart_t_r" @tap="allEmpty">
                    <image src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/del_icon.png" mode="" />
                    <text>清空购物车</text>
                </view>
            </view>
            <view class="goods_list">
                <view class="goods_info_" @tap="updateStatus" :data-isactivity="item.isactivity" :data-index="index" v-for="(item, index) in selectedServerList" :key="index">
                    <view class="goods_name">
                        <text class="num">{{ item.serviceNo }}</text>
                        <text class="name">{{ item.serviceName || item.serviceOptionDetails[0].optionvalue }}</text>
                    </view>

                    <view class="goods_sel">
                        <image v-if="!item.isactivity" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/no-pitch.png" mode="" />
                        <image v-if="item.isactivity" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/project-pitch.png"></image>
                    </view>
                </view>
            </view>
        </view>
        <view class="modal-mask" @tap="hideModal" v-if="showModal" @touchmove.stop.prevent="trueFun" style="overflow: visible !important"></view>
        <!-- 弹出层 -->
        <view v-if="showModal" @touchmove.stop.prevent="trueFun" style="overflow: visible !important">
            <view class="modal-content" @touchmove.stop.prevent="trueFun" style="overflow: visible !important">
                <view class="qrcodetextbox">
                    <view class="time-box2">
                        <image class="time-left" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/time_lt.png"></image>
                        <view class="qrcodetext">选择会员</view>
                        <image class="time-left" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/time_rl.png"></image>
                    </view>
                    <image class="done" @tap="done" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/done.png"></image>
                </view>

                <view class="qrcodebox">
                    <view class="qrcodetextbox2">
                        <input
                            class="input-phone-up"
                            maxlength="11"
                            @input="blurPhone2"
                            value=""
                            placeholder="请输入顾客手机号码"
                            placeholder-class="placeholder-style2"
                            type="text"
                        />
                        <button class="inquire2" @tap="inquire2" :disabled="isDisabled">查询</button>
                    </view>
                    <!-- <view class="phone-hint2" wx:if="{{ishint}}">
      输入正确手机号
    </view> -->
                    <view class="replace-box" v-if="memberLists.mobile">
                        <view class="replace-lt">
                            <image class="girl" mode="aspectFill" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/girl.png"></image>
                            <view>
                                <view class="lt-nname">{{ memberLists.userName }}</view>
                                <view class="lt-hpone2">{{ memberLists.mobile }}</view>
                            </view>
                        </view>
                        <view class="replace-rl" @tap="replace">去替换</view>
                    </view>
                </view>
                <view class="qrcodeicon">
                    <view class="qrcodeiconbox" v-for="(item, index) in serviceList" :key="index">
                        <image class="wechatvip" :src="item.img"></image>

                        <P class="wechattext">{{ item.title }}</P>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import _request from '../../utils/request';
import { toDecimal2 } from '../../utils/util.js';
export default {
    data() {
        return {
            servelist: [],
            rightserve: [],
            curNav: '',
            rightconterts: '',
            selectedServerList: [],

            // 已选服务项目
            rentalmoney: 0,

            btnIndex: 0,
            showGoods: false,
            type: 1,
            showModal: false,
            ajxtrue: false,
            ishint2: false,
            phone2: '',

            memberList: {
                headPicture: '',
                storeVip: '',
                mobile: '',
                balance: ''
            },

            memberid: '',
            selGoods: [],
            serviceName: '',
            isDisabled: true,

            memberLists: {
                mobile: '',
                userName: ''
            },

            ishint: false,
            servermodel: 0,
            isactivity: false,
            serviceList: []
        };
    },
    onLoad(o) {
        console.log(o);

        if (o.memberid) {
            this.setData({
                memberid: o.memberid
            });
        }

        if (o.memberList) {
            console.log(JSON.parse(o.memberList));
            this.setData({
                memberList: JSON.parse(o.memberList)
            });
        }

        if (uni.getStorageSync('servesListFlag')) {
            uni.setStorageSync('servesListFlag', false);
            uni.removeStorageSync('servesList');
        }

        this.setData({
            type: o.type
        });

        if (o.type == '3') {
            this.setData({
                selGoods: JSON.parse(o.ids)
            });
        }

        console.log(this.selGoods);
        this.getServelist();
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    methods: {
        inquire2() {
            this.getMemberByMobile(this.phone2);
        },

        // 根据手机号码查询会员
        getMemberByMobile(phone) {
            _request
                .get('/cashier/getMemberByMobile', {
                    shopId: uni.getStorageSync('shopId'),
                    mobile: phone
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        let obj = res.data.data;
                        obj instanceof Object;

                        if (obj instanceof Object == false) {
                            uni.showToast({
                                title: res.data.data,
                                icon: 'none'
                            });
                        }

                        this.setData({
                            memberLists: res.data.data
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        nextStep() {
            let serviceIds = [];
            this.selectedServerList.forEach((i) => {
                if (i.isactivity) {
                    serviceIds.push(i.serviceId || i.id);
                }
            });

            if (this.type === 1) {
                uni.redirectTo({
                    url: `/pagesc/cashierinfo/cashierinfo?serviceIds=${JSON.stringify(serviceIds)}`
                });
            } else {
                // 会员
                uni.redirectTo({
                    url: `/pagesc/cashierinfo/cashierinfo?memberid=${this.memberid}&serviceIds=${JSON.stringify(serviceIds)}&memberList=${JSON.stringify(this.memberList)}`
                });
            }
        },

        ElasticFrameClick() {
            this.setData({
                showModal: true
            });
        },

        done() {
            this.setData({
                showModal: false
            });
        },

        //替换
        replace() {
            this.setData({
                memberList: this.memberLists,
                showModal: false
            });
        },

        // 手机号2验证
        blurPhone2: function (e) {
            var phone = e.detail.value;
            console.log('a', phone);
            let that = this;

            if (!/^1[345678]\d{9}$/.test(phone)) {
                this.setData({
                    ajxtrue: false,
                    ishint2: true,
                    phone2: phone,
                    isDisabled: true
                });

                if (phone == '') {
                    this.setData({
                        ishint2: false,
                        isDisabled: true
                    });
                }

                if (phone.length >= 11) {
                    this.setData({
                        ajxtrue: false,
                        ishint2: true,
                        isDisabled: true
                    });
                }
            } else {
                this.setData({
                    ajxtrue: true,
                    ishint: false,
                    phone2: phone,
                    isDisabled: false
                });
            }
        },

        goToQuick() {
            uni.showToast({
                title: '开发中',
                icon: 'none'
            });
            return; // wx.navigateTo({
            //   url: '/pagesc/quickpay/quickpay',
            // })
        },

        goToCard() {
            uni.navigateTo({
                url: '/pagesc/cardsale/index?type=3'
            });
        },

        allEmpty() {
            let data = this.selectedServerList;

            for (let i of data) {
                i.isactivity = false;
            }

            console.log(data);
            this.setData({
                selectedServerList: data
            });
        },

        updateStatus(e) {
            const { index, isactivity } = e.currentTarget.dataset;
            this.selectedServerList[index].isactivity = !isactivity;
        },

        hideGoodsInfo() {
            this.setData({
                showGoods: false
            });
        },

        showGoodsInfo() {
            this.setData({
                showGoods: !this.showGoods
            });
        },

        getBtnIndex(e) {
            console.log(e);
            const { index } = e.currentTarget.dataset;
            this.setData({
                btnIndex: index
            });
        },

        // 右侧
        select(e) {
            const { index } = e.currentTarget.dataset;
            let currentItem = this.rightserve;
            currentItem[index].isactivity = !currentItem[index].isactivity;
            console.log('00', currentItem);
            this.setData(
                {
                    rightserve: currentItem
                },
                () => {
                    // 计算金额
                    this.getMapMoney(this.servelist);
                }
            );
        },

        // 获取服务金额
        getMapMoney(obj) {
            console.log(obj);
            let rentalmoney = 0;
            let list = [];
            obj.map((item) => {
                if (item) {
                    console.log('212'); // let title = item.servicename;

                    item.services.map((v) => {
                        if (v.isactivity) {
                            rentalmoney += (v.price * 100) / 100;
                            let obj = {
                                price: toDecimal2(v.price),
                                shopId: v.shopId,
                                serviceNo: v.serviceNo,
                                serviceId: v.serviceId,
                                serviceName: v.serviceName,
                                staffId: v.staffId,
                                img: v.img,
                                serviceId: v.id,
                                servicemodel: '1',
                                isoption: 0,
                                optionId: 0,
                                optionname: '',
                                optiontitle: '',
                                optionvalue: '',
                                orderId: 0,
                                isactivity: true
                            };
                            list.push(obj);
                        }
                    });
                } else {
                    let serviceId = item.serviceId;
                    let servicename = item.servicename;
                    let img = item.picture;
                    item.services.map((v) => {
                        let title = v.optiontitle;

                        if (v.serviceOptionDetails) {
                            v.serviceOptionDetails.map((i) => {
                                if (i.isactivity) {
                                    rentalmoney += i.price;
                                    let obj = {
                                        shopId: i.shopId,
                                        optionname: i.optionname,
                                        serviceNo: i.serviceNo,
                                        optiontitle: title,
                                        optionvalue: i.optionvalue,
                                        price: toDecimal2(i.price),
                                        serviceId: serviceId,
                                        serviceName: i.serviceName,
                                        servicemodel: '1',
                                        name: i.optionvalue,
                                        img: i.img,
                                        isactivity: true
                                    };
                                    list.push(obj);
                                }
                            });
                        }
                    });
                }
            });
            this.setData(
                {
                    selectedServerList: list,
                    rentalmoney: rentalmoney
                },
                () => {
                    // 计算服务类型
                    let modelList = list.map((item) => {
                        return item.servicemodel;
                    });

                    if (modelList.indexOf('1') > -1 && modelList.indexOf('2') == -1 && modelList.indexOf('3') == -1) {
                        this.setData({
                            servermodel: 1
                        });
                    } else if (modelList.indexOf('1') == -1 && modelList.indexOf('2') > -1 && modelList.indexOf('3') == -1) {
                        this.setData({
                            servermodel: 2
                        });
                    } else if (modelList.indexOf('1') == -1 && modelList.indexOf('2') == -1 && modelList.indexOf('3') > -1) {
                        this.setData({
                            servermodel: 3
                        });
                    } else if (modelList.indexOf('1') > -1 && modelList.indexOf('2') == -1 && modelList.indexOf('3') > -1) {
                        this.setData({
                            servermodel: 4
                        });
                    }
                }
            );

            if (list.length == 0) {
                this.setData({
                    isactivity: false
                });
            }
        },

        //左侧栏目点击事件
        onLeftTab: function (e) {
            let index = e.target.dataset.index;
            var rightserve = this.servelist[index].services;
            rightserve.forEach((item) => {
                if (item.memberPrice === null) {
                    item.memberPrice = '';
                    return;
                }
            });
            let curNav = e.target.dataset.id;
            let rightconterts = this.servelist[index].name;
            this.setData({
                curNav: curNav,
                rightserve: rightserve,
                rightconterts: rightconterts
            });
        },

        getServelist() {
            _request
                .get('/cashier/getStoreServices', {
                    shopId: uni.getStorageSync('shopId')
                })
                .then((res) => {
                    let data = res.data.data;
                    let rightconterts = data[0]?.name;
                    let rightserve = data[0]?.services;
                    let curNav = data[0]?.id;
                    console.log(data);

                    if (this.type == '3') {
                        data.forEach((i) => {
                            i.services.forEach((k) => {
                                this.selGoods.forEach((j) => {
                                    if (k.id === j) {
                                        k.isactivity = true;
                                    }
                                });
                            });
                        });
                    }

                    this.setData({
                        curNav: curNav,
                        rightconterts: rightconterts,
                        rightserve: rightserve,
                        servelist: data.map((item) => {
                            let obj = {};

                            if (item.list) {
                                obj.servicename = item.title;
                                obj.isactivity = false;
                                obj.isgroup = true;
                                obj.maxPrice = item.maxPrice;
                                obj.price = item.price;
                                obj.serviceOptions = item.list.map((v) => {
                                    let objs = {};
                                    objs.isactivity = !!v.isactivity;
                                    objs.price = v.newPrice;
                                    objs.name = v.serviceName;
                                    objs.icon = v.path;
                                    objs.categoryId = v.categoryId;
                                    objs.id = v.id;
                                    objs.sds = [];
                                    return objs;
                                });
                                return obj;
                            } else {
                                item.services.map((v) => {
                                    v.isactivity = !!v.isactivity;
                                    v.isgroup = true;
                                    return v;
                                });
                                return item;
                            }
                        })
                    });
                    let msg = [];
                    this.servelist.forEach((i) => {
                        i.services.forEach((j) => {
                            if (j.isactivity) {
                                msg.push(j);
                            }
                        });
                    });
                    this.setData({
                        selectedServerList: msg
                    });
                });
        },

        scrollLower() {
            console.log('占位：函数 scrollLower 未声明');
        },

        trueFun() {
            console.log('占位：函数 true 未声明');
        },

        hideModal() {
            console.log('占位：函数 hideModal 未声明');
        }
    }
};
</script>
<style>
.cashier_box {
    width: 750rpx;
    height: 240rpx;
    position: relative;
}
/* 1 */
.cashier_box_2 {
    width: 750rpx;
    height: 240rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vip_info {
    width: 670rpx;
    height: 140rpx;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(242, 93, 3, 0.16);
    border-radius: 10rpx;
}
.cas_bg {
    width: 750rpx;
    height: 240rpx;
    position: absolute;
    top: 0;
    left: 0;
}
.cashier_type {
    width: 750rpx;
    height: 240rpx;
    display: flex;
    position: absolute;
    z-index: 999;
    justify-content: space-around;
    align-items: center;
}
.traveler_view {
    width: 202rpx;
    height: 122rpx;
    position: relative;
    margin-top: 15rpx;
}
.traveler_view text {
    position: absolute;
    left: 35rpx;
    top: 35rpx;
    font-size: 32rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
}
.vip_view {
    width: 202rpx;
    height: 122rpx;
    position: relative;
    margin-top: 15rpx;
}
.hr_ text {
    font-size: 32rpx !important;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333 !important;
}
.t_1 {
    font-size: 32rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
    position: absolute;
    left: 47rpx;
    top: 20rpx;
}
.t_2 {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
    position: absolute;
    left: 35rpx;
    top: 65rpx;
}
.traveler_bg {
    width: 202rpx;
    height: 122rpx;
}
.vip_bg {
    width: 220rpx;
    height: 122rpx;
}
.type_btn {
    width: 750rpx;
    height: 95rpx;
    background: #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.project {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.project text {
    font-size: 26rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}
.project view {
    width: 58rpx;
    height: 8rpx;
    background: #e94a18;
}
.goods {
    margin-left: 211rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.goods view {
    width: 58rpx;
    height: 8rpx;
    background: #e94a18;
}
.goods text {
    font-size: 26rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}
.classify_box {
    width: 25%;
}

.classify_img {
    width: 80rpx;
    height: 80rpx;
}

.banner_img2 {
    width: 710rpx;
    height: 166rpx;
}

.bar_box {
    width: 60rpx;
    height: 6rpx;
    margin: 0 auto;
}

/* 列表样式 */
.goods_info {
    width: 330rpx;
    position: relative;
    z-index: 1;
    background: #ffffff;
    box-shadow: 0px 6rpx 10rpx 0rpx rgba(102, 102, 102, 0.2);
    border-radius: 10rpx;
    margin-bottom: 20rpx;
}

.coluboxleft {
    overflow: initial !important;
}

.coluboxright {
    overflow: initial !important;
    position: relative;
}

.goods_img {
    width: 330rpx;
    height: 248rpx !important;
}

.goods_sold {
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 20rpx;
    background: linear-gradient(90deg, #666666 0%, rgba(102, 102, 102, 0.03) 97%, rgba(255, 255, 255, 0) 100%);
}

.totop {
    right: 43rpx;
    position: fixed;
    -webkit-overflow-scrolling: touch;
    z-index: 1;
    width: 66rpx;
    height: 66rpx;
}

.page-wrap {
    position: relative;
    -webkit-overflow-scrolling: touch;
    z-index: 1;
}

.flsxs-serve {
    display: flex;
    justify-content: space-between;
}

.serve-name {
    text-align: center;
    height: 62rpx;
    line-height: 62rpx;
    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    text-overflow: ellipsis !important;
    white-space: nowrap;
}

.serve-price {
    margin-left: 16rpx;
}

.vip-price {
    /* margin-left: 17rpx; */
    font-size: 26rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #e94a18;
}

.markerpic {
    height: 34rpx;
    background: #fff6ef;
    border: 1rpx solid #ff8722;
    border-radius: 4rpx;
    justify-content: center;
    display: flex;
    align-items: center;
    font-size: 22rpx;
    padding: 0 10rpx;
}

/* 盲盒 */
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
    z-index: 1;
    -webkit-overflow-scrolling: touch;
}

.wrapperbox {
    width: 750rpx;
    display: flex;
    justify-content: center;
    height: 911rpx;
    top: -100rpx;
    position: relative;
    z-index: 1;
    -webkit-overflow-scrolling: touch;
}

.headimg {
    width: 720rpx;
    height: 640rpx;
}

.btn_ft {
    position: fixed;
    -webkit-overflow-scrolling: touch;

    z-index: 1;
    /* z-index: 99; */
    width: 112rpx;
    height: 136rpx;
    bottom: 120rpx;
    right: 20rpx;
}

.btn_close {
    position: absolute;
    -webkit-overflow-scrolling: touch;
    z-index: 1;
    width: 82rpx;
    height: 82rpx;
    bottom: 16rpx;
    left: calc(50% - 41rpx);
}

.column .flexs .padding-lr {
    min-width: max-content;
    text-align: center;
}

.remark {
    border-bottom: 20rpx solid #f1f1f1;
    height: 798rpx;
}

.columnbuttom {
    border-bottom: 20rpx solid #f1f1f1;
    flex: none;
    z-index: 9999;
}

.remarktop {
    height: 20rpx;
    background-color: #f1f1f1;
}

.remarkbox {
    padding: 0 30rpx 0 30rpx;
    height: 100%;
}

.pagebottom {
    height: 100rpx;
}

.worksSum {
    margin-left: 10rpx;
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #666666;
}

.remarktitle {
    width: 100%;
    height: 121rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.remarktitlleft {
    display: flex;
    height: 39rpx;
}

.remarkicon {
    width: 50rpx;
    height: 39rpx;
}

.remarkp {
    margin-left: 4rpx;
    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #222222;
}

.remarkmore {
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 500;
}

.scorebox {
    height: 124rpx;
    background-color: rgba(254, 236, 226, 0.5);
    border-radius: 10rpx;
}

.scorefigure {
    padding: 20rpx 0 0 42rpx;
    font-size: 36rpx;
    font-family: FZChaoCuHei-M10S;
    font-weight: 400;
    color: #e94a18;
}

.scorefigurebottom {
    padding: 0 18rpx 0rpx 31rpx;
    display: flex;
    justify-content: space-between;
}

.padding-lrserve {
    display: flex;
}

.synthesis {
    margin-right: 82rpx;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
}

.classifyserve {
    margin-right: 27rpx;
}

.feedback {
    margin-right: 80rpx;
}

.scoreinfo {
    height: 103rpx;
    display: flex;
    margin-top: 39rpx;
    justify-content: space-between;
    padding-right: 20rpx;
}

.scoreinfoicon {
    width: 80rpx;
    height: 80rpx;
    background: linear-gradient(0deg, #f1aa14 0%, #fb7099 100%);
    border: 2rpx solid #ffffff;
    box-shadow: 0px 4rpx 4rpx 0px rgba(156, 100, 2, 0.2);
    border-radius: 50%;
}

.scoreinfoiconbox {
    display: flex;
}

.scoreinforight {
    margin-left: 28rpx;
}

.scorename {
    display: flex;
    align-items: center;
}

.scorenametext {
    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
}

.scorephone {
    font-size: 26rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
}

.scorevip {
    text-align: center;
    width: 100rpx;
    height: 32rpx;
    line-height: 32rpx;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    background-color: rgba(233, 74, 24, 0.1);
}

.scoremember {
    margin-left: 10rpx;
    text-align: center;
    width: 110rpx;
    height: 32rpx;
    line-height: 32rpx;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    background-color: rgba(233, 74, 24, 0.1);
}

.screenbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.screen {
    width: 44rpx;
    height: 43rpx;
}

.screentext {
    font-size: 26rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
}

.evaluation {
    width: 560rpx;
    /* height: 309rpx; */
    margin-left: 109rpx;
    border-top: 1rpx solid #e5e5e5;
    border-bottom: 1rpx solid #e5e5e5;
}

.evaluationtext {
    margin-top: 30rpx;
    margin-bottom: 30rpx;
    font-size: 26rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
}

.evaluationimagebox {
    display: flex;
    margin-top: 30rpx;
    justify-content: space-between;
    flex-wrap: wrap;
    width: auto;
    margin-bottom: 30rpx;
}

.evaluationimage {
    width: 160rpx;
    height: 160rpx;
    /* background: linear-gradient(0deg, #F1AA14 0%, #FB7099 100%); */
    border-radius: 10rpx;
}

.evaluationbottom {
    width: 560rpx;
    height: 80rpx;
    margin-left: 108rpx;
    display: flex;
    justify-content: space-between;
}

.evaluationname {
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
    line-height: 80rpx;
}

.evaluationtime {
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
    line-height: 80rpx;
}

/* 模态框 */
.modal-mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.5;
    overflow: hidden !important;
    z-index: 9999;
    color: #fff;
}
.time-box2 {
    width: 210rpx;
    display: flex;
    align-items: center;
    margin: 0 auto;
}

.time-left {
    width: 21rpx;
    height: 15rpx;
}

.modal_title {
    height: 112rpx;
    display: flex;
    align-items: center;
    padding-left: 22rpx;
    background-color: #fff;
    color: #fff;
    text-align: center;
    /* border-radius: 20rpx 20rpx 0px 0px; */
    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    line-height: 130rpx;
    border-bottom: 1rpx solid #e5e5e5;
}

.select-titlebox {
    align-items: center;
    display: flex;
    height: 29rpx;
    margin: 0 auto;
}

.time-left {
    width: 21rpx;
    height: 15rpx;
}

.select-title {
    margin: 0 10rpx;
    text-align: center;
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}

.qrcodetext {
    font-size: 36rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    line-height: 113rpx;
}

.qrcodeimage {
    width: 300rpx;
    height: 300rpx;
    display: block;
    margin: 0 auto;
}

.qrcodespan {
    display: block;
    text-align: center;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
    margin-top: 20rpx;
}

.modal_titleicon {
    width: 82rpx;
    height: 82rpx;
    background: linear-gradient(0deg, #f1aa14 0%, #fb7099 100%);
    border: 2rpx solid #ffffff;
    box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(156, 100, 2, 0.2);
    border-radius: 50%;
}

.modal_titletext {
    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    margin-left: 8rpx;
}

.modal_textarea {
    height: 395rpx;
    width: calc(100% - 40rpx);
    margin: 20rpx;
    overflow: visible !important;
}

.done {
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    top: 18rpx;
    right: 11rpx;
}

.modal_textarea textarea {
    height: 100%;
    width: 100%;
}

.stylistIdsicon {
    margin-right: 28rpx;
    margin-left: 9rpx;
    width: 100rpx;
    height: 99rpx;
}

.statsbox {
    margin-top: 20rpx;
}

.statusn {
    padding: 5rpx 10rpx;
    background-color: rgba(233, 74, 24, 0.1);
    color: #e94a18;
    margin-right: 10rpx;
}

.qrcodeicon {
    margin: 0 auto;
    margin-left: 33rpx;
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;
}

.schedules {
    display: block;
    margin: 6rpx auto;
    width: 4rpx;
    height: 28rpx;
}

.scheduleright {
    width: 4rpx;
    height: 28rpx;
    margin: right;
    margin-right: 40rpx;
}

.confirm {
    margin: 0 auto;
    text-align: center;
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
    width: 408rpx;
    height: 66rpx;
    line-height: 66rpx;
    background: #e94c19;
    box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(188, 46, 0, 0.2);
    border-radius: 33rpx;
    margin-top: 180rpx;
}

.qrcodeiconschedule {
    margin-right: 28rpx;
    text-align: right;
}

.inservice {
    font-size: 28rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #e94a18;
}

.qrcodeiconbox {
    margin-top: 48rpx;
    width: 100rpx;
    text-align: center;
}

.wechattext {
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
}

.wechatvip {
    width: 100rpx;
    height: 100rpx;
}

.btn {
    height: 70rpx;
    width: 390rpx;
    background-color: #5a94ff;
    color: #fff;
    text-align: center;
    line-height: 70rpx;
    border-radius: 50rpx;
    margin: 0 auto;
    margin-top: 40rpx;
    overflow: visible;
}

/* 底部电话弹窗 */

.zindex-99 {
    z-index: 99;
}

.overlaybox {
    position: absolute;
    bottom: 170rpx;
    margin: 100rpx 20rpx;
    width: 710rpx;
    background-color: white;
    border-radius: 20rpx;
}

.overlaybox1 {
    height: 100rpx;
    border-radius: 80rpx;
    line-height: 100rpx;
    text-align: center;
    color: #007aff;
}

.overlaytext1 {
    text-align: center;
    font-size: 30rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000;
    height: 50rpx;
    line-height: 50rpx;
}

.overlaytext2 {
    text-align: center;
    font-size: 30rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000;
    height: 50rpx;
}

.overlaybox2 {
    width: 710rpx;
    height: 100rpx;
    background-color: white;
    line-height: 100rpx;
    text-align: center;
    line-height: 100rpx;
    margin: 100rpx 20rpx;
    margin-top: 30rpx;
    border-radius: 80rpx;
    color: #007aff;
    position: absolute;
    bottom: 50rpx;
}

.detailsiofo {
    display: flex;
    height: 80rpx;
    padding-left: 21rpx;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
}

.detailstext {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}

.sendDynamic {
    height: 100rpx;
    width: 100rpx;
    bottom: 100rpx;
    right: 60rpx;
    border-radius: 50%;
    position: fixed;
}

.swiper-view {
    position: relative;
    border-bottom: 1px solid #f6f8fc;
}

.swiper-box {
    height: 355rpx;
}

.swiper-item-view {
    zoom: 1;
    box-sizing: border-box;
}

.swiper-item-view:after {
    display: table;
    content: '';
    clear: both;
}

.swiper-top {
    z-index: 9990;
    width: 100%;
    position: absolute;
    top: 0;
    /* left: 40rpx; */
    height: 54rpx;
    line-height: 54rpx;
    background: linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0) 30%);
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
}

.swiper-toptitle {
    overflow-y: auto;
    padding-left: 40rpx;
    width: 386rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 热门 */
.swiper-itembox {
    background: #ffffff;
    box-shadow: 0px 6px 10px 0px rgba(170, 109, 3, 0.16);
    border-radius: 10px;
}

.hoticon {
    width: 88rpx !important;
    height: 88rpx !important;
}

.swiper_itemacive {
    width: 620rpx;
    height: 290rpx;
    background-color: #fff;
    box-shadow: 0px 6rpx 10rpx 0px rgba(170, 109, 3, 0.16);
    border-radius: 10rpx;
    scale: 0.9;
}

.swiper_item {
    width: 620rpx;
    height: 290rpx;
    background-color: #fff;
    box-shadow: 0px 6rpx 10rpx 0px rgba(170, 109, 3, 0.16);
    border-radius: 10rpx;
}

.servicebox {
    border-top: 1rpx solid #e9e7e7;
    padding: 0 20rpx;
    height: 90rpx;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.subscribe {
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #ffffff;
    text-shadow: 0px 2px 4px rgba(233, 76, 25, 0.4);
    text-align: center;
    width: 110rpx;
    line-height: 40rpx;
    height: 40rpx;
    border-radius: 20rpx;
}

.identity_introduce {
    height: 60rpx;
    width: 580rpx;
    margin: 0 auto;
    margin-bottom: 9rpx;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
}

.swiper_itemtitle {
    margin: 0rpx 12rpx 0 20rpx;
    display: flex;
    align-items: center;
    height: 127rpx;
}

.swiper-image {
    overflow: hidden;
    /* height: 170px; */
    width: 620rpx;
    height: 340rpx;
    transition: transform 500ms;
    transform: scale(0.95, 0.9);
    /* 缩放处理，产生一种层次感 */
    border-radius: 8px;
    box-shadow: 0px 6px 10px 0px rgba(179, 154, 139, 1);
}

.swiper-image.active {
    transform: scale(1, 1);
}

.swiper-dots-view {
    /* 水平居中*/
    position: absolute;
    display: flex;
    justify-content: center;
    width: 100%;
    left: 0;
    bottom: 10px;
    height: 18rpx;
    /* height: 6px; */
}

.swiper-dot {
    width: 6px;
    height: 6px;
    margin: 0 3px;
    border-radius: 3px;
    background-color: #fff;
}

.swiper-dot.active {
    width: 15px;
    background-color: rgb(221, 65, 3);
}

.swiperbox {
    height: 290rpx;
}

.swiper_itembox {
    height: 299rpx !important;
}

.image_group {
    height: 290rpx;
}

.slide-image {
    background-color: #fff;
    position: absolute;
    height: 230rpx;
    width: 620rpx;
    border-radius: 15rpx;
    z-index: 5;
    /* overflow: initial !important; */
    top: 12%;
}

.active {
    background-color: #fff;
    z-index: 10;
    height: 288rpx;
    width: 620rpx;
    top: 0%;
    transition: all 0.1s ease-in 0s;
    /* box-shadow: 0px 6rpx 10rpx 0rpx rgba(170, 109, 3, 0.16); */
    overflow: initial !important;
}

.shopcolumn {
    border-top: 0rpx solid #f1f1f1;
}

.advertising {
    width: 39rpx;
    height: 39rpx;
    margin-right: 10rpx;
}

.align-baseline {
    align-items: center;
    display: flex;
}

.picture-box {
    text-align: center;
    z-index: 9990;
    position: absolute;
    right: 40rpx;
    bottom: 40rpx;
    width: 110rpx;
    height: 40rpx;
    line-height: 40rpx;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 20rpx;
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
}

.haveshopstate {
    display: block;
    width: 84rpx;
    height: 30rpx;
    background-color: rgba(140, 194, 72, 0.1);
    border-radius: 6rpx;
    margin: 12rpx 0 0 13rpx;
    line-height: 30rpx;
    text-align: center;
    color: #8cc248;
}

page {
    height: 100%;
    background-color: #fff;
}

.cardsome {
    border-top: 20rpx solid #f1f1f1;
    padding: 30rpx;
    display: flex;
    justify-content: space-between;
}

.van-tabs__scroll {
    background-color: #f1f1f1 !important;
}

.van-tabs {
    position: relative;

    -webkit-tap-highlight-color: transparent;
}

.search-box {
    height: 100rpx;
    padding: 0rpx 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 20rpx solid #f1f1f1;
}

.search {
    display: flex;
    border: 1rpx solid #dcdcdc;
    border-radius: 10rpx;
    width: 710rpx;
    height: 60rpx;
    background: #fff;
    align-items: center;
}
.search input {
    height: 60rpx;
}

.search-quality {
    line-height: 60rpx;
    width: 457rpx;
    height: 60rpx;
    border-radius: 22px;
    display: flex;
    border: 1rpx solid #dcdcdc;
    background: linear-gradient(0deg, #ffffff 0%);
    border-radius: 10rpx;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #999999;
}

.mt-20 {
    margin-top: 0rpx;
}

.seaicon {
    margin: 0 7rpx 0rpx 11rpx;
    margin-top: 4rpx;
}

.adaptive {
    height: 150rpx;
}

.search text {
    font-size: 24rpx;
    font-family: PingFangSC-Light, PingFang SC;
    font-weight: 400;
    line-height: 60rpx;
    font-family: Source Han Sans CN;
    color: #999999;
}

.myorder {
    width: 172rpx;
    height: 50rpx;
}

.myquality {
    width: 212rpx;
    height: 50rpx;
}

.classify-box {
    background-color: #fff;
    /* height: 100vh; */
}

.classify {
    border-bottom: 20rpx solid #f1f1f1;
}

/* 分类 */
.nav_left {
    overflow-y: auto;
    width: 180rpx;
    height: 58vh;
    background: #fff;
    font-size: 30px;
    font-family: Source Han Sans CN;
    font-weight: 400;
}
._nav_left {
    height: 74.5vh !important;
}

.nav_left .nav_left_items {
    /* padding: 20rpx; */
    font-size: 28rpx;
    width: 180rpx;
    height: 103rpx;
    text-align: center;
    line-height: 103rpx;
    border-bottom: 1rpx solid #e5e5e5;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.active {
    background: #f1f1f1;
    color: #e94a18;
    position: relative;
}

.active::before {
    content: '';
    position: absolute;
    left: 0rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 8rpx;
    height: 64rpx;
    background: #e94a18;
}

.nav_right .nav_right_top {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 99;
    display: flex;
    padding-top: 20rpx;
    width: 75%;
    height: 80rpx;
    border-bottom: 1px solid #dedede;
    background: #fff;
    white-space: nowrap;
    font-size: 28rpx;
    flex-direction: row;
}

.choose-good {
    text-align: center;
    width: 138rpx;
    height: 52rpx;
    line-height: 52rpx;
    background: #e94c19;
    border-radius: 26rpx;
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
    margin-right: 40rpx;
}

.serve-icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: 10rpx;
}

/*二级分类，固定不动*/

.nav_right_top .right_top_items {
    display: inline-block;
    margin-left: 20rpx;
}

.nav_right_list {
    overflow-y: auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    /* height: calc(100vh - 600rpx); */
}

/*高度100vh - 上方140rpx*/
.flex-row {
    display: flex;
    justify-content: space-between;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.nav_right_items {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.nav_right {
    /* height: 820rpx; */
    height: 58vh;
    width: 550rpx;
    border-left: 22rpx solid #f1f1f1;
    overflow-y: auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.nav_right .totalCount {
    position: fixed;
    top: 80rpx;
    right: 0;
    z-index: 99;
    padding-left: 15rpx;
    width: 75%;
    height: 60rpx;
    border-bottom: 1px solid #dedede;
    background: #fff;
    font-size: 28rpx;
    line-height: 60rpx;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.nav_right_itemsname {
    height: 100rpx;
    line-height: 100rpx;
    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
    padding: 0 35rpx 0 20rpx;
    border-bottom: 1rpx solid #e5e5e5;
}

.nav_right_info {
    /* height: 164rpx; */
    padding: 0 35rpx 20rpx 20rpx;
    display: flex;
    align-items: center;
    border-bottom: 20rpx solid #f1f1f1;
    margin-top: 20rpx;
    /* position: relative; */
}

.righticon {
    width: 124rpx;
    height: 124rpx;
    border-radius: 10rpx;
}

.conten-box {
    /* height: 124rpx; */
    margin-left: 18rpx;
    overflow: initial;
}

.rightconterts-title {
    width: 300rpx;
    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    overflow: initial;
}

.conten-right {
    position: relative;
    display: flex;
    flex: 1;
    justify-content: space-between;
    overflow: initial;
}

.original-price {
    font-size: 26rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
    margin-top: 5rpx;
    overflow: initial;
}

.vip-price {
    font-size: 26rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #e94a18;
    margin-top: 5rpx;
    overflow: initial;
}

.project-pitch {
    width: 41rpx;
    height: 40rpx;
    position: absolute;
    right: 0rpx;
    top: 20rpx;
}
.base-box {
    /* border-top: 1rpx solid #E5E5E5; */
    width: 100%;
    position: fixed;
    z-index: 10002;
    bottom: 0rpx;
    height: 105rpx;
    line-height: 105rpx;
    display: flex;
    justify-content: space-between;
    /* padding-left: 40rpx; */
    align-items: center;
    background-color: #fff;
    padding-bottom: 30rpx;
}
.serve-iconbox {
    display: flex;
    align-items: center;
    margin-left: 40rpx;
}
.serve-icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: 10rpx;
}
.ServerListsum {
    color: #e94c19;
}
.choose-good {
    text-align: center;
    width: 138rpx;
    height: 52rpx;
    line-height: 52rpx;
    background: #e94c19;
    border-radius: 26rpx;
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
    margin-right: 40rpx;
}
.showGoods {
    width: 750rpx;
    height: 100vh;
    background: hsl(0, 0%, 20%);
    opacity: 0.5;
    position: fixed;
    top: 0;
    z-index: 10001;
}
.shoppingCart {
    width: 750rpx;
    height: 560rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    position: fixed;
    bottom: 133rpx;
    z-index: 10002;
}
.cart_t {
    display: flex;
    align-items: center;
    height: 99rpx;
    justify-content: space-between;
    border-bottom: 1rpx solid #e5e5e5;
}
.cart_t_l {
    display: flex;
    align-items: center;
    margin-left: 40rpx;
}
.cart_t_l view {
    width: 8rpx;
    height: 8rpx;
    background: #e94a18;
    border-radius: 50%;
}
.cart_t_l text {
    font-size: 32rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    margin-left: 10rpx;
}
.cart_t_r {
    display: flex;
    align-items: center;
    margin-right: 40rpx;
}
.cart_t_r image {
    width: 26rpx;
    height: 26rpx;
    margin-right: 10rpx;
}
.cart_t_r text {
    font-size: 26rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #666666;
}
.goods_list {
    height: 460rpx;
    overflow: auto;
}
.goods_info_ {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 40rpx;
    border-bottom: 1rpx solid #e5e5e5;
    padding: 33rpx 0;
}
.goods_name {
    display: flex;
    align-items: center;
}
.num {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #e94a18;
}
.name {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    margin-left: 10rpx;
}
.goods_sel image {
    width: 40rpx;
    height: 40rpx;
}
/* 34 */
.shop-message {
    height: 140rpx;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(242, 93, 3, 0.16);
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    width: 670rpx;
}

.shop-lt {
    width: 314rpx;
    height: 80rpx;
    display: flex;
}
.hr {
    width: 2rpx;
    height: 130rpx;
    background: linear-gradient(0deg, #ffffff, #e94a18, #ffffff);
}

.lt-profile {
    width: 80rpx;
    height: 80rpx;
    margin-left: 20rpx;
}
.lt-profile image {
    width: 80rpx;
    height: 80rpx;
}
/* 567 */
.lt-name {
    font-size: 28rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    margin-left: 13rpx;
}

.lt-shopvip {
    width: 100rpx;
    height: 32rpx;
    background-color: rgba(233, 74, 24, 0.1);
    border-radius: 4rpx;
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #e94a18;
    padding: 0rpx 10rpx;
}

.lt-phone {
    font-size: 28rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    margin-top: 10rpx;
}

.shop-rl {
    width: 354rpx;
    display: flex;
    align-items: center;
    height: 80rpx;
    justify-content: space-between;
}

.rl-vip {
    font-size: 28rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}

.rl-remaining {
    font-size: 28rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    margin-top: 10rpx;
}

.rl-vipbox {
    margin-left: 28rpx;
}

.replace {
    width: 54rpx;
    height: 54rpx;
    margin-right: 15rpx;
}
/* 模态框 */
.modal-mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.5;
    overflow: hidden !important;
    z-index: 9999;
    color: #fff;
}

/* 白色背景 */
.modal-content {
    position: fixed;
    top: 380rpx;
    z-index: 9999;
    width: 670rpx;
    margin-left: 40rpx;
    height: 500rpx;
    overflow: visible !important;
    background: #ffffff;
    border: 1rpx solid #e5e5e5;
    box-shadow: 0rpx 4rpx 14rpx 0rpx rgba(102, 102, 102, 0.3);
    border-radius: 10rpx;
}

.modal_title {
    height: 130rpx;
    display: flex;
    align-items: center;
    padding-left: 22rpx;
    background-color: #fff;
    color: #fff;
    text-align: center;
    /* border-radius: 20rpx 20rpx 0px 0px; */
    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    line-height: 130rpx;
    border-bottom: 1rpx solid #e5e5e5;
}

.qrcodetextbox {
    text-align: center;
    height: 113rpx;
    border-bottom: 1rpx solid #e5e5e5;
}

.qrcodetextbox2 {
    display: flex;
    height: 180rpx;
    align-items: center;
}

.qrcodetext {
    margin: 0 12rpx;
    font-size: 36rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    line-height: 113rpx;
}

.qrcodeimage {
    width: 300rpx;
    height: 300rpx;
    display: block;
    margin: 0 auto;
}

.qrcodespan {
    display: block;
    text-align: center;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
    margin-top: 20rpx;
}

.modal_titleicon {
    width: 82rpx;
    height: 82rpx;
    background: linear-gradient(0deg, #f1aa14 0%, #fb7099 100%);
    border: 2rpx solid #ffffff;
    box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(156, 100, 2, 0.2);
    border-radius: 50%;
}

.modal_titletext {
    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    margin-left: 8rpx;
}

.modal_textarea {
    height: 395rpx;
    width: calc(100% - 40rpx);
    margin: 20rpx;
    overflow: visible !important;
}

.done {
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    top: 18rpx;
    right: 11rpx;
}

.modal_textarea textarea {
    height: 100%;
    width: 100%;
}

.qrcodeicon {
    width: 540rpx;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.qrcodeiconbox {
    margin-top: 48rpx;
    width: 100rpx;
    text-align: center;
}
.phone-hint {
    color: #ffffff;
    font-size: 24rpx;
}
.input-phone {
    width: 680rpx;
    height: 80rpx;
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(233, 74, 24, 0.2);
    border-radius: 40rpx;
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    display: flex;
    padding-left: 30rpx;
    align-items: center;
    justify-content: space-between;
}

.input-phone-up {
    width: 590rpx;
    height: 80rpx;
    border-radius: 40rpx;
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1rpx solid #dcdcdc;
    border-radius: 40px;
    margin: 0 auto;
    padding-left: 20rpx;
}
.inquire {
    text-align: center;
    width: 120rpx;
    height: 60rpx;
    line-height: 60rpx;
    background: #ffffff;
    box-shadow: 0rpx 6rpx 14rpx 0rpx rgba(233, 74, 24, 0.16);
    border-radius: 30rpx;
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #e94a18;
    margin-right: 10rpx;
}
.replace-box {
    width: 590rpx;
    height: 120rpx;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(102, 102, 102, 0.16);
    border-radius: 10rpx;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.inquire2 {
    text-align: center;
    width: 120rpx;
    line-height: 60rpx;
    height: 60rpx;
    background: #e94a18;
    border-radius: 30rpx;
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
    margin-right: 10rpx;
}

.replace-rl {
    width: 120rpx;
    height: 54rpx;
    background: #e94a18;
    border-radius: 27rpx;
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
    line-height: 54rpx;
    margin-right: 10rpx;
    text-align: center;
}

.done {
    width: 26rpx;
    height: 26rpx;
    margin-right: 10rpx;
}
.replace-lt {
    display: flex;
    align-items: center;
    height: 80rpx;
    margin-left: 20rpx;
}

.girl {
    width: 80rpx;
    height: 80rpx;
    margin-right: 22rpx;
}

.lt-nname {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    text-align: left;
}

.lt-hpone2 {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}
</style>
